<template>
  <textarea class="text-editor" v-model="state.editorText" @input="adjustHeight"></textarea>
</template>

<script setup lang="ts" name="DialogEditor">
import type { LLMDialog } from '@/llmDialog/llmDialog'
import type { LDStateReactive } from '@/llmDialog/types'
import { inject } from 'vue'

// 状态
const state = inject('state') as LDStateReactive

const adjustHeight = (e: Event) => {
  // 输入框最大高度
  const maxHeight = 150
  const textarea: HTMLTextAreaElement = e.target as HTMLTextAreaElement

  // 重置高度以获取正确的 scrollHeight
  textarea.style.height = 'auto'

  // 输入框实际高度
  // 限制最小高度为 60
  const contentHeight = Math.max(textarea.scrollHeight, 60)

  // 更新高度
  if (contentHeight > maxHeight) {
    textarea.style.height = maxHeight + 'px'
  } else {
    textarea.style.height = contentHeight + 'px'
  }
}
</script>

<style scoped>
.text-editor {
  color: var(--ld-color-text);
  width: 100%;
  height: 60px;
  padding: 0;
  resize: none;
  font-size: 16px;
  user-select: text;
  white-space: pre-wrap;
  word-break: break-word;
  outline: none;
  overflow: auto;
  border: none;
  background-color: var(--ld-color-input-bg);
}
</style>
